<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link href="__PUBLIC__/css/index.css" rel="stylesheet"> -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <style type="text/css">
    .total
    {
        width:100%;
        height:100%;
        background: #B3B3B3;
        display:none;
        position: fixed;
        opacity:0.5;
        z-index: 2;
    }
    .addbook
    {
        width:300px;
        height:360px;
        position:fixed;
        display:none;
        top:150px;
        left:600px;
        background:#fff;
        z-index: 5;

    }
.addbook tr
{
    height:50px;
}

    </style>
    <body>
    <div class="total"></div>
    <div class="addbook">
            <span style="float:right; margin-right:15px;margin-top:15px; font-size:18px; cursor:pointer" onclick="add1()">X</span>
            <form style="margin-top:20px;margin-left:30px;float:left" id="myform">
            <table style="float:left" >
    <tr><th>书名：</th><td><input type="text" name="bookname" value="" placeholder=""></td></tr><br>
    <tr><th>作者：</th><td><input type="text" name="author" value="" placeholder=""></td></tr><br>
     <tr><th>出版社： </th><td><input type="text" name="bookmark" value="" placeholder=""></td></tr><br>
    <tr><th></th><td><input type="button" name="" value="添加" style="width:150px;height:30px" onclick="addb()"></td></tr>
    </table>
    </form>
    </div>
    <p>欢迎{:session('username')}登录</p>
    <form method="post" action="{:url('User/addfun')}">
    书名： <input type="text" name="bookname" value="" placeholder="">
    作者： <input type="text" name="author" value="" placeholder="">
    出版社： <input type="text" name="bookmark" value="" placeholder="">
    <input type="submit" name="" value="添加">
    </form>
    <a href="javascript:;" onclick="add1()">添加图书</a>
    <form method="post" action="{:url('User/search')}">
    搜索书名：<input type="text" name="bookname" value="" placeholder="">
    <input type="submit"  value="搜索">
    </form>
    <table width="100%" border="1" id="addto">
    <tr>
      <th>书名</th>
      <th>作者</th>
      <th>出版社</th>
      <th>操作</th>
    </tr>
    {volist name='data' id='v'}
    <tr>
    <td><input type="text" name="bookname" value="{$v.bookname}"  onchange="upda({$v.id},this.value,'bookname')" /></td>
    <td><input type="text" name="author" value="{$v.author}"  onchange="upda({$v.id},this.value,'author')" /></td>
    <td><input type="text" name="bookmark" value="{$v.bookmark}"  onchange="upda({$v.id},this.value,'bookmark')" /></td>
    <td>
    <a href="javascript:;" onclick="dele({$v.id},'{$v.bookname}')">删除</a></td>
    </tr>
    {/volist}
    </table>
    <div>
    {$page}
    </div>

    <form method="post" action="{:url('User/upload')}" enctype="multipart/form-data">
      <input type="file" name="filename" value="" placeholder="">
      <input type="submit" value="上传">
    </form>
{volist name="arr" id="x"}
<a href="__PUBLIC__/../uploads/{$x.filename}">{$x.filename}</a><br>
{/volist}
<hr>
    <a href="{:url('User/loginout')}" >退出登录</a>
    </body>
    <script type="text/javascript">
    	
    	function upda(id,value,column)
    	{
			$.post("{:url('User/updatefun1')}",{id:id,value:value,column:column},function(data){
				if(data.status=="1")
				{
					alert(data.message);
				}
				else
				alert(data.message);
			});
    	}
    function dele(id,bookname)
    {
      $.get("{:url('User/delete1')}",{id:id}, function(data) {
           if(data.status=='1')
           {
                            var tb = document.getElementById("addto");  //根据id找到这个表格
                            var lie;
                                    var rows = tb.rows;               //取得这个table下的所有行
                                 for(var i=0;i<rows.length;i++)//循环遍历所有的tr行
                                    {
                                    for(var j=0;j<rows[i].cells.length;j++)//取得第几行下面的td个数，再次循环遍历该行下面的td元素
                                    {
                                     var cell = rows[i].cells[j];//获取某行下面的某个td元素
                                     if(cell.innerHTML == bookname){
                                        lie=i;

                                    }   

                                    }

                                }
                            $.each($("#addto tr"), function(i){   
                               if(i == lie){    
                                  
                                  this.style.display = 'none';  
                               }  
                            });
           }
           else
            alert(data.message);
       });

    }

    function add1()
    {
        $('.total').toggle(500);
        $('.addbook').toggle(1000);
    }

    function addb()
    {
        var formData = new FormData($("#myform")[0]);//获取表单数据        
          $.ajax({
               url: "{:url('User/addfun1')}",//提交地址
               type: 'POST',
               data: formData,
               async: false,
               cache: false,
               contentType: false,
               processData: false,
               success: function (returndata) {
                if(returndata.status=='1'){
                  var bookname='"'+'bookname'+'"';
                  var author='"'+'author'+'"';
                  var bookmark='"'+'bookmark'+'"';

                  var str="<tr>";
    
                  str+="<td><input type='text' name='bookname' value='"+returndata.data.bookname+"' onchange='upda("+returndata.data.id+",this.value,"+bookname+")'/></td>";
                  str+="<td><input type='text' name='author' value='"+returndata.data.author+"' onchange='upda("+returndata.data.id+",this.value,"+author+")'/></td>";
                  str+="<td><input type='text' name='bookmark' value='"+returndata.data.bookmark+"' onchange='upda("+returndata.data.id+",this.value,"+bookmark+")'/></td>";
                  str+="<td><a href='javascript:;' >删除</a></td></tr>";
                 $('#addto').append(str);
                        // alert(returndata.message);
                          add1();
                        // window.location.href="{:url('User/index')}";
                }
                else
                    alert(returndata.message);           
               },
               error: function (returndata) {
               alert(returndata.message);

           }
          });   
    }
    </script>
</html>